<!-- eslint-disable max-len -->
<template>
  <div class="table-wrapper h100" ref="tableWrapperRef">
    <s-table
      ref="flowReportTable"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :scrollX="1100"
      class="h100">
      <template
        slot-scope="text"
        v-for="column in commonColumns"
        :slot="column.scopedSlots.customRender"
      >
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="text"
          :key="column.key"
        />
      </template>
      <!-- 流量信号 -->
      <template slot="flowNetwork" slot-scope="text">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="text ? $options.filters.DictLabelFilter(text, flowNetworkList) : '_'">
        </table-ellipsis>
      </template>
      <!-- 月份 -->
      <template slot="monthNum" slot-scope="text,record">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="record.flowEndTime ? $options.filters.month(record.flowEndTime) : '_'">
        </table-ellipsis>
      </template>
      <!-- 开始时间 -->
      <template slot="flowStartTime" slot-scope="text">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="text ? $options.filters.moment(text) : '_'">
        </table-ellipsis>
      </template>
      <!-- 结束时间 -->
      <template slot="flowEndTime" slot-scope="text">
        <table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="text ? $options.filters.moment(text) : '_'">
        </table-ellipsis>
      </template>
      <!-- 操作 -->
      <template #operation="text,record">
        <span>
          <auth-text :auth="statisticsPerms.flowDetail.view" @click="handleSeeEcuFlowDetail(record)">{{ $t('detail') }}</auth-text>
        </span>
      </template>
    </s-table>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { STable } from '@/components'
// 引入统计权限
import { statisticsPerms } from '@/config/permission/index'
// 引入抽屉的使用
import { minxinDrawerUse } from '@/utils/mixin'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { flowReportTbColumns, flowNetworkList } from '../config/list'
import AuthText from '@/components/AuthText'
import FlowDetailOnEcu from './FlowDetailOnEcu.vue'

export default {
  components: {
    STable,
    tableEllipsis,
    AuthText
  },
  mixins: [minxinDrawerUse],
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      selectedRowKeys: [],
      columns: flowReportTbColumns,
      selectModelDone: false,
      flowNetworkList,
      statisticsPerms
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.stasticsFlowRport.queryParams
    }),
    commonColumns () {
      return this.columns.filter((item) => !item.special)
    }
  },
  methods: {
    ...mapMutations(['SET_FlowReport_RealQuery']),
    // 请求数据加载表格
    loadData (parameter) {
      if (this.selectModelDone === false) {
        return new Promise((resolve) => resolve([]))
      }
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
        if (JnqueryParam[key] instanceof Array) {
          JnqueryParam[key] = JnqueryParam[key].toString()
        }
      }
      const query = { ...parameter, ...JnqueryParam }
      this.SET_FlowReport_RealQuery(query)
      return this.$api.getFlowDetailReportList(query)
    },
    // 刷新表格
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.flowReportTable.loadData(obj)
    },
    // 查看流量详情
    handleSeeEcuFlowDetail (record) {
      const vars = {
        list: record.flowEcuModel,
        time: Date.now()
      }
      const title = this.$t('llxq')
      this.showRightDrawer(FlowDetailOnEcu, title, [], 'large', vars)
    }
  },
  beforeDestroy () {
    // 销毁组件之前清空搜索条件
    this.$store.commit('resetFlowReportQueryParams')
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
</style>
